<template>
  <div>
    <ul>
      <li v-for="(value, key) in userList" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>

  <div>
    <h2>用户列表</h2>
    <button @click="fetchUserList">获取用户列表</button>
    <ul>
      <li v-for="(value, key) in userList1" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getUserList } from '@/axios' // 导入封装好的请求函数，路径根据实际情况调整

const userList = ref([])
const userList1 = ref([])

// 在组件挂载后发起请求获取用户列表数据
onMounted(async () => {
  try {
    const response = await getUserList()
    userList.value = response.data // 将获取到的数据赋值给响应式的userList
  } catch (error) {
    console.error('请求用户列表出错：', error)
  } finally {
    console.log(userList)
  }
})

// 定义获取用户列表的函数
const fetchUserList = async () => {
  try {
    const response = await getUserList()
    userList1.value = response.data
  } catch (err) {
    console.log(err)
  } finally {
    console.log(userList1)
  }
}
</script>
